// @prefix: exlist;
// .@{prefix}-img {
//   display: block;
// }

@perfix: ex-detail;

.@{perfix} {
  background-color: #ededed;

  &-img {
    position: relative;
    background-color: #000;
    padding: 10px 0 30px;

    img {
      margin: 0 auto;
      width: 500px;
      height: 500px;
    }

    .@{perfix}-look {
      position: absolute;
      left: 20px;
      bottom: 20px;
      display: flex;
      align-items: center;
      z-index: 10000;

      >span {
        &:first-child {
          width: 32px;
          height: 24px;
          background-image: url("../assets/chakan@2x.png");
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100%;
        }

        &:last-child {
          padding-left: 10px;
          font-size: 22px;
          color: #fff;
        }
      }
    }
  }

  &-context {
    padding: 0 30px;
    text-align: justify;

    // background-color: #ededed;
    &_title {
      font-size: 42px;
      color: #020202;
      line-height: 60px;
      padding: 30px 0;
    }

    &_subtitle {
      font-size: 24px;
      color: rgba(2, 2, 2, 0.8);
      line-height: 33px;
    }

    &_text {
      padding: 30px 0;
      font-size: 28px;
      color: rgba(2, 2, 2, 0.91);
      line-height: 42px;

      p {
        text-indent: 2em;
      }
    }
  }
}